
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core" template="../vue/template.xhtml"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="banniere">
		<h2>Emergency</h2>
	</ui:define>

	<ui:define name="content">
		<h:form>
			<p:panel header="Registration">
				<table>
					<tr>
						<td>First Name</td>
						<td><h:inputText id="userFirstName"
								value="#{userBean.firstName}" required="true">
								<f:validator validatorId="validators.username" />
							</h:inputText></td>
							<p:watermark for="userFirstName" value="[a-zA-Z0-9]" ></p:watermark>
						<td><h:message for="userFirstName" showSummary="false" showDetail="true"
								style="color:red" /></td>
					</tr>
					<tr>
						<td>Last Name</td>
						<td><h:inputText id="userLastName"
								value="#{userBean.lastName}" required="true">
								<f:validator validatorId="validators.username" />
							</h:inputText></td>
							<p:watermark for="userLastName" value="[a-zA-Z0-9]" ></p:watermark>
						<td><h:message for="userLastName" showSummary="false" showDetail="true"
								style="color:red" /></td>
					</tr>
					<tr>
						<td>Age</td>
						<td><h:inputText id="userAge" value="#{userBean.age}"
								required="true">
								<f:validator validatorId="validators.age" />
							</h:inputText></td>
						<td><h:message for="userAge" showSummary="false" showDetail="true"
								style="color:red" /></td>
					</tr>
					<tr>
						<td>Email address</td>
						<td><h:inputText id="userEmail" value="#{userBean.email}"
								required="true">
								<f:validator validatorId="validators.email" />
							</h:inputText></td>
							<p:watermark for="userEmail" value="address@domain.com" ></p:watermark>
						<td><h:message for="userEmail" showSummary="false" showDetail="true"
								style="color:red" /></td>
					</tr>
					<tr>
						<td>Login</td>
						<td><h:inputText id="userLogin" value="#{userBean.login}"
								required="true">
								<f:validator validatorId="validators.login" />
							</h:inputText></td>
							<p:watermark for="userLogin" value="[a-zA-Z0-9._]" ></p:watermark>
						<td><h:message for="userLogin" showSummary="false" showDetail="true"
								style="color:red" /></td>
					</tr>
					<tr>
						<td>Password</td>
						<td><h:inputSecret id="pwd" value="#{userBean.pwd}">
								<f:validator validatorId="validators.pwd"></f:validator>
								<f:attribute name="confirmPwd" value="#{rePwd}"></f:attribute>
							</h:inputSecret></td>
						<td><h:message for="pwd" showSummary="false" showDetail="true" style="color:red" /></td>
					</tr>
					<tr>
						<td>Re-enter Password</td>
						<td><h:inputSecret id="rePwd" value="#{userBean.rePwd}"
								binding="#{rePwd}" /></td>
								<p:watermark for="rePwd" value="Similar to password" ></p:watermark>
						<td><h:message for="rePwd" showSummary="false" showDetail="true"
								style="color:red" /></td>
					</tr>
					<tr>
						<td></td>
						<td><h:commandButton value="OK"
								action="#{userBeanController.registerUser(userBean)}" /></td>
					</tr>
				</table>
			</p:panel>
		</h:form>
	</ui:define>
</ui:composition>